<template>
    <div class="bground" style="flex-direction: column; align-items: center;">
        <div style="width:14%;border-radius: 100px;display: flex; justify-content: center; align-items: center;">
            <el-form :model="ruleForm">
                <el-form-item label="头像" style="display: flex;justify-content: center;align-items: center;--el-form-label-font-size: 14px;">
                    <img style="width:250px;height: 250px;border-radius: 100px;" v-if="ruleForm.image" :src="ruleForm.image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
                </el-form-item>
            </el-form>
        </div>


        <el-descriptions
                title="个人基本信息"
                :column="1"
                :size="36"
                :model="ruleForm"
                border
                style="margin-top: 20px;font-size: 18px;width: 400px;line-height: 38px"
        >
            <el-descriptions-item label="用户名">{{ruleForm.username}}</el-descriptions-item>
            <el-descriptions-item label="姓名" >{{ruleForm.name}}</el-descriptions-item>
            <el-descriptions-item label="邮箱" >{{ruleForm.email}}</el-descriptions-item>
            <el-descriptions-item label="性别">
                <template v-if="ruleForm.sex === 'MALE'">
                    男
                </template>
                <template v-else>
                    女
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="电话"
            >{{ruleForm.phone}}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
    import {ref, onMounted} from 'vue'
    import {findUser} from '@/api/user'

    import { useStore } from "vuex";

    const store = useStore();

    const ruleForm=ref({
        id:1,
        username: '',
        sex: 'MALE',
        name: '',
        email: '',
        phone: '',
        image: ''
    })
    const users = ref([])
    onMounted(() => {

        findUser({id: store.getters.getId}).then((res)=>{
            console.log(res.data)
            ruleForm.value=res.data
            users.value.push(res.data)
        })

    })


</script>

<style scoped>
    .bground{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        /*background-color:#f5f5f5;*/
        border: 1px solid #ccc;
        border-radius: 10px;
        background-image: url('../../views/slider-pic/bizhi4.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>
